<template>
	<div>
		<div class="graybg"></div>
		<!--头部-->
		<header id="header">
			<div class="header header_bg clearfix">
				<div class="header_left pull-left">
					<i class="iconfont baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
				</div>
				<div class="header_center baiColor" v-text="headerName"></div>
				
			</div>
		</header>
		<div class="main _width">
			
			<div class="main-main marginAuto" v-if="holder">
				<div class="main-each _width clearfix" v-for="each in eachs">
					<div class="each_img pull-left">
						<img :src="each.img"/>
					</div>
					<div class="each-text pull-left">
						<h4 v-text="each.name"></h4>
						<p v-text="each.date"></p>
					</div>
					<div class="money pull-right">
						<span>{{each.tic}}{{each.price}}</span>
					</div>
				</div>
			</div>
			<div v-else>
				<img class="noneimg" src="../assets/fuwucenter.png"/>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				holder:true,
				eachs:[
//				{	
//					data:"00-00",	//时间
//					price:"00.00",	//钱数
//					tic:""//收入|支出
//				},
				],
				headerName:""	
				
			}
		},
		mounted(){
			//此页面是除余额明细外的所有明细页面
			//1 冻积分明细 2冻积分转账明细 3活积分明细 4活积分转账明细 5余额转账明细
			var info = window.localStorage.data;
			var str=window.location.href;
			var num=str.lastIndexOf("/")+1;
			var id = str.substring(num);
			var params = new URLSearchParams();
			params.append('token', info);	//客户秘钥(信息)
			params.append('type',id);
			if(id == 1){
				this.headerName = "冻积分明细";
			}else if(id == 2){
				this.headerName = "冻积分转账明细";
			}else if(id == 3){
				this.headerName = "活积分明细";
			}else if(id == 4){
				this.headerName = "活积分转账明细";
			}else if(id == 5){
				this.headerName = "余额转账明细";
			};
			this.$axios({
			   url:"Home/Transaction/transaction",
				method:"post",
				data:params
			  }).then((res)=>{
			  	console.log(res.data)
			   	var datas = res.data;
			   	if(res.data.code == 1){
		   			this.holder = true;
		   			this.eachs = datas.data;
			   	}else if(res.data.code == 2){
			   		this.holder = false;
			   	}else if(res.data.code == 0){
			   		alert("返回数据失败")
			   	}
			}).catch(function(err){
				console.log(err)		
			})
		}
	}
</script>

<style scoped>
	@import "../css/public.css";
	.noneimg{
		display: block;
		width: 200px;
		height: 200px;
		margin: auto;
		padding-top: 20px;
	}
	.main{
		padding-top: 45px;
	}
	.main-main{
		width: 90%;
		padding: 5px;
		background: #fff;
		padding-bottom: 20px;
	}
	.main-each{
		height: 50px;
		border-bottom: 1px solid #e8e4e4;
	}
	.each_img{
		width: 38px;
		height: 38px;
		margin-right: 8px;
		margin-top: 7px;
	}
	.each_img img{
		width: 100%;
		height: 100%;
		border-radius: 8px;
	}
	.each-text h4{
		color: #333333;
		font-size: 16px;
		line-height: 22px;
	}
	.each-text p{
		font-size: 12px;
		color: #999;
		line-height: 22px;
	}
	.money{
		line-height: 50px;
		color:#F3961F;
		font-size: 16px;
	}
	
</style>